<template>
  <div ref="container" style="height: auto;">
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>发布推文</h1>
        <span class="rightBtn" style="color: #deaa8a;" @click="nextStep"
          >下一步</span
        >
        <span class="rightBtn" style="color: #deaa8a;" @click="save"
          >存草稿</span
        >
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="publish">
      <div class="title">
        <textarea
          class="textarea"
          placeholder="请输入标题，32字以内"
          maxlength="32"
        ></textarea>
        <div class="upload">
          <!-- <div class="no">
						<img src="../../assets/images/mkf/add.png" /><span>上传封面<br />（3:4）</span>
					</div> -->
          <img class="yes" src="../../assets/images/adver.jpg" />
        </div>
      </div>

      <div class="content">
        <!-- bidirectional data binding（双向数据绑定） -->
        <!-- template部分 -->
        <div id="toolbar" slot="toolbar">
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-list" value="ordered" title="有序列表"></button>
          <button class="ql-list" value="bullet" title="无序列表"></button>
          <select class="ql-color" value="color" title="字体颜色"></select>
          <button class="ql-image" title="插入图片"></button>
        </div>
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
        >
        </quill-editor>
      </div>

      <div class="btns">
        <div class="right">
          <button type="button" @click="showPicker = true">
            {{ transform }}<span class="iconfont icon-jiantou"></span>
          </button>
          <button type="button" @click="showPicker2 = true">
            {{ money.value }}<span class="iconfont icon-jiantou"></span>
          </button>
        </div>
      </div>
    </div>

    <!--  -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :title="'请设置转换权限'"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        visible-item-count="3"
      />
    </van-popup>
    <!--  -->
    <van-popup v-model="showPicker2" round position="bottom">
      <div class="setMoney">
        <div class="title">
          <span>请设置转换费用</span>
          <span class="cancel" @click="showPicker2 = false">取消</span>
        </div>
        <div class="cont">
          <div
            :class="['item', { active: money.index == index }]"
            v-for="(item, index) in moneylist"
            @click="setMoney(item, index)"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <p class="tip1">用户付费转换后，你可得70%</p>
        <p class="tip2">社群主可免费纳入社群合集</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { Picker } from "vant";
export default {
  name: "",
  components: {
    vanPicker: Picker,
    vanPopup: Popup
  },
  props: {},
  data: function() {
    return {
      editor: null, // 富文本编辑器对象
      content: "",
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: "#toolbar"
        },
        theme: "snow",
        placeholder: "请输入正文"
      },
      showPicker: false,
      showPicker2: false,
      transform: "所有人可转换",
      money: {
        index: 0,
        value: "免费转换"
      },
      moneylist: ["免费转换", "0.99", "2.99", "9.99", "19.99", "29.99"],
      columns: []
    };
  },
  mounted: function() {
    this.editor = this.$refs.myQuillEditor.quill;
    this.columns = [
      {
        text: "所有人可转换成自己推文",
        text1: "所有人可转换"
      },
      {
        text: "仅社群成员可转换成自己推文",
        text1: "仅社群成员可转换"
      }
    ];
  },
  beforeDestroy() {
    this.editor = null;
    delete this.editor;
  },
  methods: {
    onEditorBlur() {
      console.log("blur", this.content);
    },
    onEditorFocus() {
      console.log("focus", this.content);
    },
    onEditorReady() {
      console.log("ready", this.content);
    },
    save() {
      console.log(this.content);
      //保存成功后提示
      this.$dialog.toast({
        mes: "保存成功"
      });
    },
    nextStep() {
      this.$router.push({
        path: "/user/publish2"
      });
    },
    onConfirm(v) {
      console.log(v);
      this.transform = v.text1;
      this.showPicker = false;
    },
    setMoney(item, index) {
      this.money.index = index;
      this.money.value = item;
      this.showPicker2 = false;
    }
  }
};
</script>

<style scoped>
.fixHead .title .rightBtn {
  padding: 0 4px;
  margin-left: 0.2rem;
}

.fixHead .title h1 {
  left: 2.6rem;
  right: 2.6rem;
}

.setMoney {
  background-color: #32303a;
  padding-bottom: 0.36rem;
}

.setMoney .title {
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setMoney .title span {
  font-size: 0.32rem;
  color: rgba(255, 255, 255, 0.5);
}

.setMoney .title .cancel {
  font-size: 0.28rem;
  padding: 0 0.2rem;
  position: absolute;
  top: 0;
  right: 0;
}

.setMoney .cont {
  padding: 0.4rem 0.2rem 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.setMoney .cont .item {
  width: 2.2rem;
  height: 1rem;
  border-radius: 0.1rem;
  background-color: rgba(255, 255, 255, 0.5);
  line-height: 1rem;
  text-align: center;
  font-size: 0.32rem;
  color: #2a2631;
  margin-bottom: 0.2rem;
}

.setMoney .cont .item.active {
  background-color: #deaa8a;
}

.setMoney .tip1 {
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.48rem;
  color: #deaa8a;
}

.setMoney .tip2 {
  text-align: center;
  font-size: 0.24rem;
  line-height: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
}
</style>
<style>
.publish .content {
  color: #999999;
}

.ql-editor {
  font-size: 0.32rem;
  line-height: 0.64rem;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border: none;
}

.ql-toolbar.ql-snow {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.3);
  font-style: normal;
}

.ql-snow .ql-stroke {
  stroke: #666;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #666;
}

.van-cell {
  background: transparent;
  padding: 0;
}

.van-picker__title {
  color: #ffffff;
  opacity: 0.5;
}

.van-picker {
  background-color: #32303a;
}

.van-picker__cancel,
.van-picker__confirm {
  color: #999999;
  width: 90px;
}

.van-picker__confirm {
  text-align: right;
}

.van-picker__cancel:active,
.van-picker__confirm:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.van-picker-column__item {
  color: rgba(255, 255, 255, 1);
}

.van-hairline--top-bottom::after {
  border-width: 0;
}

.van-picker__mask {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(50, 48, 58, 0.9)),
      to(rgba(50, 48, 58, 0.4))
    ),
    -webkit-gradient(linear, left bottom, left top, from(rgba(50, 48, 58, 0.9)), to(rgba(50, 48, 58, 0.4)));
  background-image: linear-gradient(
      180deg,
      rgba(50, 48, 58, 0.9),
      rgba(50, 48, 58, 0.4)
    ),
    linear-gradient(0deg, rgba(50, 48, 58, 0.9), rgba(50, 48, 58, 0.4));
}

.van-picker__frame {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
